<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/static/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <title>商品分类</title>
    <%@include file="/static/include/head.jsp" %>
    <link href="${ctx }/static/jquery/treeTable/css/jquery.treeTable.css" rel="stylesheet"/>

    <script src="${ctx }/static/jquery/treeTable/jquery.treeTable.min.js"></script>
    <script src="${ctx }/static/js/mustache.min.js"></script>
</head>

<body>
<form id="searchForm" modelAttribute="goodsCat" action="${ctx}/product/goodsCat/treeTable" method="post" class="breadcrumb form-inline">
    <%-- 过滤条件 --%>
        <label>分类名称 ：</label>
        <input type="text" id="name" name="sp_name_LIKE" maxlength="100" class="form-control input-sm"/>
    &nbsp;<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
    <input id="btnAddTop" class="btn btn-info" type="button" value="新增顶级" onclick="formWindow()"/>
</form>
<tags:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-hover table-condensed dataTable tree_table">
    <thead>
    <tr>
        <%--主键不输出
        <th class="center">
            <label>
                <input type="checkbox" />
            </label>
        </th>
        --%>
        <th>分类名称</th>
        <th>商品类型</th>
        <th>是否显示</th>
		<th>排序</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="treeTableList">
        <%-- table content --%>
    </tbody>
</table>

<%-- table content template --%>
<script type="text/template" id="treeTableTpl">
    <tr id="{{row.id}}" pId="{{row.pid}}" hasChild="{{row.hasChild}}">
        <%--
        <td class="center">
            <label>
                <input type="checkbox" value="{{row.id}}"/>
            </label>
        </td>
        --%>
        <td>{{row.name}}</td>
        <td>{{row.goodsType}}</td>
        <td>{{row.listShow}}</td>
		<td>{{row.catOrder}}</td>
        <td>
            <input id="btnView" class="btn btn-info btn-xs" type="button" value="查看" onclick="formWindow('{{row.id}}','view')"/>
            <input id="btnEdit" class="btn btn-success btn-xs" type="button" value="修改" onclick="formWindow('{{row.id}}','edit')"/>
            <input id="btnDel" class="btn btn-danger btn-xs" type="button" value="删除" onclick="del('{{row.id}}')"/>
            <input id="btnAdd" class="btn btn-primary btn-xs" type="button" value="添加下级" onclick="formWindow('{{row.id}}','add')"/>
        </td>
    </tr>
</script>

<!-- modal dialog -->
<%@include file="/static/include/modal.jsp"%>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function() {
        var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
        $.ajax({
            type : "POST",  //提交方式
            url : "${path}/product/goodsCat/treeTableData",//路径
            data : {
                "id" : "${param.id}"
            },
            success : function(result) {//返回数据根据结果进行相应的处理
                var data = result ;
                var ids = [], rootIds = [];
                for (var i=0; i<data.length; i++){
                    ids.push(data[i].id)
                }
                ids = ',' + ids.join(',') + ',';
                for (var i=0; i<data.length; i++){
                    if (ids.indexOf(','+data[i].pid+',') == -1){
                        if ((','+rootIds.join(',')+',').indexOf(','+data[i].pid+',') == -1){
                            rootIds.push(data[i].pid);
                        }
                    }
                }
                for (var i=0; i<rootIds.length; i++){
                    addRow("#treeTableList", tpl, data, rootIds[i]);
                }
                var option = {
//                    expandLevel : 5,
                    beforeExpand : function($treeTable, id) {
                        //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                        if ($('.' + id, $treeTable).length) { return; }
                         //这里的html可以是ajax请求
                         $.ajax({
                             type : "POST",  //提交方式
                             url : "${path}/product/goodsCat/treeTableData",//路径
                             data : {
                                 "id" : id
                             },
                             success : function(result) {
                                 for (var i=0; i<result.length; i++){
                                     var row = result[i];
                                     $treeTable.addChilds(Mustache.render(tpl, { row: row }));
                                 }
                             }
                         });
                    },
                    onSelect : function($treeTable, id) {
                        window.console && console.log('onSelect:' + id);
                    }
                };
                $("#treeTable").treeTable(option);
            }
        });
    });

    function addRow(list, tpl, data, pid){
        for (var i=0; i<data.length; i++){
            var row = data[i];
            if ((!row?'':!row.pid?'':row.pid) == pid){
                $(list).append(Mustache.render(tpl, { row: row }));
                addRow(list, tpl, data, row.id);
            }
        }
    }

    function formWindow(id,type) {
        var url = '${ctx}/product/goodsCat/form' ;
        if(id && type != 'add'){ // 修改
            url += "?id="+id;
        } else if(id && type == 'add'){ //添加子
            url += "?pid="+id;
        }
        if(type){
            if(url.indexOf("?") != -1){
                url += "&type="+type;
            }else{
                url += "?type="+type;
            }
        }
        $("#formModal").modal({
            show:true,
            keyboard: true,
            remote: url
        });
    }

    /**
     * 删除操作
     * @param id
     */
   function del(id) {
       confirm("确认要删除吗？", function(result){
       	if(result){
       		ajaxReq("${ctx}/product/goodsCat/delete?id=" + id, function(){
       			$("#btnSubmit").click(); //刷新列表
       		});
       	}
       });
   }
</script>
